<!DOCTYPE html>
<html>

<head>
    <!-- 页面meta -->
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <title>角色管理</title>

    <!-- Tell the browser to be responsive to screen width -->
    <meta content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" name="viewport">


    <link rel="stylesheet" href="../plugins/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="../plugins/font-awesome/css/font-awesome.min.css">
    <link rel="stylesheet" href="../plugins/ionicons/css/ionicons.min.css">
    <link rel="stylesheet" href="../plugins/iCheck/square/blue.css">
    <link rel="stylesheet" href="../plugins/morris/morris.css">
    <link rel="stylesheet" href="../plugins/jvectormap/jquery-jvectormap-1.2.2.css">
    <link rel="stylesheet" href="../plugins/datepicker/datepicker3.css">
    <link rel="stylesheet" href="../plugins/daterangepicker/daterangepicker.css">
    <link rel="stylesheet" href="../plugins/bootstrap-wysihtml5/bootstrap3-wysihtml5.min.css">
    <link rel="stylesheet" href="../plugins/datatables/dataTables.bootstrap.css">
    <link rel="stylesheet" href="../plugins/treeTable/jquery.treetable.css">
    <link rel="stylesheet" href="../plugins/treeTable/jquery.treetable.theme.default.css">
    <link rel="stylesheet" href="../plugins/select2/select2.css">
    <link rel="stylesheet" href="../plugins/colorpicker/bootstrap-colorpicker.min.css">
    <link rel="stylesheet" href="../plugins/bootstrap-markdown/css/bootstrap-markdown.min.css">
    <link rel="stylesheet" href="../plugins/adminLTE/css/AdminLTE.css">
    <link rel="stylesheet" href="../plugins/adminLTE/css/skins/_all-skins.min.css">
    <link rel="stylesheet" href="../css/style.css">
    <link rel="stylesheet" href="../plugins/ionslider/ion.rangeSlider.css">
    <link rel="stylesheet" href="../plugins/ionslider/ion.rangeSlider.skinNice.css">
    <link rel="stylesheet" href="../plugins/bootstrap-slider/slider.css">
    <link rel="stylesheet" href="../plugins/bootstrap-datetimepicker/bootstrap-datetimepicker.css">
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="../js/jwt-decode.js"></script>
</head>

<body class="hold-transition skin-purple sidebar-mini">

    <div class="wrapper">

        <!-- 页面头部 -->
        <header class="main-header">

            <!-- Logo -->
            <a href="common-index.html" class="logo">
                <!-- 侧边栏迷你logo，尺寸为50x50像素 -->
                <span class="logo-mini"><b>电子钱包</b></span>
                <!-- 常规状态和移动设备的logo -->
                <span class="logo-lg"><b>电子钱包</b>后台管理</span>
            </a>

            <!-- 头部导航栏：样式可以在header.less中找到 -->
            <nav class="navbar navbar-static-top">
                <!-- 侧边栏切换按钮 -->
                <a href="#" class="sidebar-toggle" data-toggle="offcanvas" role="button">
                    <span class="sr-only">Toggle navigation</span>
                </a>

                <div class="navbar-custom-menu">
                    <ul class="nav navbar-nav">

                        <li class="dropdown user user-menu">
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                                <img src="" class="user-image all-avatar-image">
                                <span class="hidden-xs employee-name"></span>
                            </a>

                            <ul class="dropdown-menu">
                                <!-- 用户图片 -->
                                <li class="user-header">
                                    <img src="" class="img-circle all-avatar-image">

                                    <p class="employee-name"></p>
                                </li>

                                <li class="user-footer">
                                    <div class="pull-left">
                                        <a href="employee-info.html" class="btn btn-default btn-flat">修改信息</a>
                                    </div>
                                    <div class="pull-right">
                                        <a href="javascript:void(0);" class="btn btn-default btn-flat"
                                            id="logoutBtn">退出账号</a>
                                    </div>
                                </li>
                            </ul>
                        </li>

                    </ul>
                </div>
            </nav>
        </header>
        <!-- 页面头部 /-->

         <!-- 导航侧栏 -->
         <aside class="main-sidebar">
            <!-- 侧边栏：样式可以在sidebar.less中找到 -->
            <section class="sidebar">
                <!-- 侧边栏用户面板 -->
                <div class="user-panel">
                    <div class="pull-left image">
                        <img src="" class="img-circle all-avatar-image">
                    </div>
                    <div class="pull-left info">
                        <p class="employee-name"></p>
                        <a href="#"><i class="fa fa-circle text-success"></i> 在线</a>
                    </div>
                </div>

                <ul class="sidebar-menu">
                    <li class="header">菜单</li>

                    <li id="admin-index"><a href="common-index.html"><i class="fa fa-dashboard"></i> <span>首页</span></a>
                    </li>

                    <!-- 菜单 -->

                    <li class="treeview">
                        <a href="#">
                            <i class="fa fa-folder"></i>
                            <span>系统管理</span>
                            <span class="pull-right-container">
                                <i class="fa fa-angle-left pull-right"></i>
                            </span>
                        </a>
                        <ul class="treeview-menu">

                            <li id="admin-role-manage">
                                <a href="role-list.html">
                                    <i class="fa fa-circle-o"></i> 角色管理
                                </a>
                            </li>

                            <li id="admin-datalist">
                                <a href="employee-list.html">
                                    <i class="fa fa-circle-o"></i> 员工管理
                                </a>
                            </li>

                            <li id="admin-user-manage">
                                <a href="user-list.html">
                                    <i class="fa fa-circle-o"></i> 用户管理
                                </a>
                            </li>

                            <li id="admin-profile">
                                <a href="employee-info.html">
                                    <i class="fa fa-circle-o"></i> 个人中心
                                </a>
                            </li>

                        </ul>
                    </li>



                    <li class="treeview">
                        <a href="#">
                            <i class="fa fa-pie-chart"></i> <span>业务管理</span>
                            <span class="pull-right-container">
                                <i class="fa fa-angle-left pull-right"></i>
                            </span>
                        </a>
                        <ul class="treeview-menu">

                            <li id="history-list">
                                <a href="history-list.html">
                                    <i class="fa fa-circle-o"></i> 历史记录管理
                                </a>
                            </li>

                        </ul>
                    </li>

                </ul>
            </section>

        </aside>
        <!-- 导航侧栏 /-->

        <!-- 内容区域 -->
        <!-- @@master = admin-layout.html-->
        <!-- @@block = content -->

        <div class="content-wrapper">

            <!-- 内容头部 -->
            <section class="content-header">
                <h1>
                    角色管理
                    <small>角色列表</small>
                </h1>
                <ol class="breadcrumb">
                    <li><a href="#"><i class="fa fa-dashboard"></i> 首页</a></li>
                    <li><a href="#">角色管理</a></li>
                    <li class="active">角色列表</li>
                </ol>
            </section>
            <!-- 内容头部 /-->

            <!-- 正文区域 -->
            <section class="content">

                <!-- .box-body -->
                <div class="box box-primary">
                    <div class="box-header with-border">
                        <h3 class="box-title">角色列表</h3>
                    </div>

                    <div class="box-body">

                        <!-- 数据表格 -->
                        <div class="table-box">

                            <!--工具栏-->
                            <div class="pull-left">
                                <div class="form-group form-inline">
                                    <div class="btn-group">
                                        <button type="button" class="btn btn-default" title="新建" id="newButton"><i
                                                class="fa fa-user-plus"></i> 新增角色</button>
                                    </div>
                                </div>
                            </div>
                            <!--工具栏/-->

                            <!--数据列表-->
                            <table id="dataList" class="table table-bordered table-striped table-hover dataTable">
                                <thead>
                                    <tr>
                                        <th class="">编号</th>
                                        <th class="">角色名</th>
                                        <th class="">角色介绍</th>
                                        <th class="text-center">操作</th>
                                    </tr>
                                </thead>
                                <tbody id="roleList">

                                </tbody>

                            </table>
                            <!--数据列表/-->
                        </div>
                        <!-- 数据表格 /-->


                    </div>
                    <!-- /.box-body -->

                    <!-- .box-footer-->
                    <div class="box-footer">
                    </div>
                    <!-- /.box-footer-->

                </div>

            </section>
            <!-- 正文区域 /-->

        </div>
        <!-- @@close -->
        <!-- 内容区域 /-->

        <!-- 底部导航 -->
        <footer class="main-footer">
            <strong>Copyright &copy; <a href="">电子钱包</a>.</strong> All rights reserved.
        </footer>
        <!-- 底部导航 /-->

    </div>

    <script type="text/javascript">

        // 顶部与侧边栏信息渲染,注销按钮
        $(document).ready(function () {
            var token = localStorage.getItem('token');
            var longToken = localStorage.getItem('longToken');

            // 获取注销按钮
            var logoutBtn = $("#logoutBtn");

            // 为注销按钮添加点击事件
            logoutBtn.click(function () {
                // 清除本地存储的 token 和 longToken
                localStorage.removeItem('token');
                localStorage.removeItem('longToken');
                // 跳转到登录
                window.location.href = 'employee-login.html';
            });

            if (token && longToken) {
                var decoded = jwt_decode(longToken);
                var userId = decoded.userId;

                getInfo(userId, token, longToken);
            } else {
                // 跳转到登录页面
                window.location.href = 'employee-login.html';
            }
        });

        // 获取个人数据，渲染侧边栏和头部
        function getInfo(userId, token, longToken) {
            var url = 'http://localhost:8080/employee/findByIdController?userId=' + userId;

            if (token && longToken) {
                url += '&token=' + token + '&longToken=' + longToken;
            }

            // 发送 AJAX 请求获取数据
            $.ajax({
                url: url,
                method: 'get',
                success: function (result) {

                    if (result.code === 200) {
                        var datas = result.datas;
                        var imageUrl = "http://localhost:8080/" + datas.imageAddress;

                        var imgs = document.querySelectorAll('img.all-avatar-image');
                        imgs.forEach(function (img) {
                            img.src = imageUrl;
                        });

                        var elements = document.querySelectorAll('.employee-name');
                        elements.forEach(function (el) {
                            el.innerHTML = datas.userName;
                        });

                    } else if (result.code === 6000 || result.code === 4000) {
                        // 跳转到登录
                        window.location.href = 'employee-login.html';
                    } else {
                        alert("获取数据失败");
                    }

                },
                error: function (xhr, status, error) {
                    console.log("请求失败");
                }
            });
        }
    </script>


    <script src="../plugins/jQuery/jquery-2.2.3.min.js"></script>
    <script src="../plugins/jQueryUI/jquery-ui.min.js"></script>
    <script>
        $.widget.bridge('uibutton', $.ui.button);
    </script>
    <script src="../plugins/bootstrap/js/bootstrap.min.js"></script>
    <script src="../plugins/raphael/raphael-min.js"></script>
    <script src="../plugins/morris/morris.min.js"></script>
    <script src="../plugins/sparkline/jquery.sparkline.min.js"></script>
    <script src="../plugins/jvectormap/jquery-jvectormap-1.2.2.min.js"></script>
    <script src="../plugins/jvectormap/jquery-jvectormap-world-mill-en.js"></script>
    <script src="../plugins/knob/jquery.knob.js"></script>
    <script src="../plugins/daterangepicker/moment.min.js"></script>
    <script src="../plugins/daterangepicker/daterangepicker.js"></script>
    <script src="../plugins/daterangepicker/daterangepicker.zh-CN.js"></script>
    <script src="../plugins/datepicker/bootstrap-datepicker.js"></script>
    <script src="../plugins/datepicker/locales/bootstrap-datepicker.zh-CN.js"></script>
    <script src="../plugins/bootstrap-wysihtml5/bootstrap3-wysihtml5.all.min.js"></script>
    <script src="../plugins/slimScroll/jquery.slimscroll.min.js"></script>
    <script src="../plugins/fastclick/fastclick.js"></script>
    <script src="../plugins/iCheck/icheck.min.js"></script>
    <script src="../plugins/adminLTE/js/app.min.js"></script>
    <script src="../plugins/treeTable/jquery.treetable.js"></script>
    <script src="../plugins/select2/select2.full.min.js"></script>
    <script src="../plugins/colorpicker/bootstrap-colorpicker.min.js"></script>
    <script src="../plugins/bootstrap-wysihtml5/bootstrap-wysihtml5.zh-CN.js"></script>
    <script src="../plugins/bootstrap-markdown/js/bootstrap-markdown.js"></script>
    <script src="../plugins/bootstrap-markdown/locale/bootstrap-markdown.zh.js"></script>
    <script src="../plugins/bootstrap-markdown/js/markdown.js"></script>
    <script src="../plugins/bootstrap-markdown/js/to-markdown.js"></script>
    <script src="../plugins/ckeditor/ckeditor.js"></script>
    <script src="../plugins/input-mask/jquery.inputmask.js"></script>
    <script src="../plugins/input-mask/jquery.inputmask.date.extensions.js"></script>
    <script src="../plugins/input-mask/jquery.inputmask.extensions.js"></script>
    <script src="../plugins/datatables/jquery.dataTables.min.js"></script>
    <script src="../plugins/datatables/dataTables.bootstrap.min.js"></script>
    <script src="../plugins/chartjs/Chart.min.js"></script>
    <script src="../plugins/flot/jquery.flot.min.js"></script>
    <script src="../plugins/flot/jquery.flot.resize.min.js"></script>
    <script src="../plugins/flot/jquery.flot.pie.min.js"></script>
    <script src="../plugins/flot/jquery.flot.categories.min.js"></script>
    <script src="../plugins/ionslider/ion.rangeSlider.min.js"></script>
    <script src="../plugins/bootstrap-slider/bootstrap-slider.js"></script>
    <script src="../plugins/bootstrap-datetimepicker/bootstrap-datetimepicker.js"></script>
    <script src="../plugins/bootstrap-datetimepicker/locales/bootstrap-datetimepicker.zh-CN.js"></script>
    <script>
        $(document).ready(function () {
            // 选择框
            $(".select2").select2();

            // WYSIHTML5编辑器
            $(".textarea").wysihtml5({
                locale: 'zh-CN'
            });

        });

        // 设置激活菜单
        function setSidebarActive(tagUri) {
            var liObj = $("#" + tagUri);
            if (liObj.length > 0) {
                liObj.parent().parent().addClass("active");
                liObj.addClass("active");
            }
        }

        // 新增角色的跳转
        $(document).ready(function () {
            var newButton = $("#newButton");
            var token = localStorage.getItem('token');
            var longToken = localStorage.getItem('longToken');

            if (token && longToken) {
                var decoded = jwt_decode(longToken);
                var roles = decoded.roles;
            } else {
                // 跳转到登录页面
                window.location.href = 'employee-login.html';
            }

            // 将 hasPermission 的值设置为 false
            var hasPermission = false;

            for (var i = 0; i < roles.length; i++) {
                var role = roles[i];
                for (var j = 0; j < role.permissions.length; j++) {
                    var permission = role.permissions[j];

                    if (permission.permissionId == 13) { // 新增角色权限
                        hasPermission = true;
                        break;
                    }
                }
                if (hasPermission) {
                    break;
                }
            }

            if (hasPermission) {
                newButton.on("click", function () {
                    window.location.href = "role-add.html";
                });
            } else {
                newButton.prop("disabled", true);
            }
        })

        // 角色类表
        function generateRoleList(token, longToken) {
            // 发送 AJAX 请求获取所有角色信息
            $.ajax({
                url: "http://localhost:8080/role/findAllController?token=" + token + '&longToken=' + longToken,
                type: "GET",
                success: function (result) {
                    if (result.code == 200) {
                        var roleList = result.datas;

                        // 角色列表生成表格
                        generateTable(roleList);


                    } else if (result.code == 4000) {
                        // 跳转到登录页面
                        window.location.href = 'employee-login.html';
                    } else {
                        alert(result.msg);
                    }
                },
                error: function () {
                    alert("请求失败"); // 弹出错误信息
                }
            });
        }

        // 根据角色列表生成表格
        function generateTable(roleList) {
            var i = 0;
            for (var roleId in roleList) {
                var role = roleList[roleId];
                var dataBody = $("#dataBody");

                var tr = $("<tr></tr>");
                i = i + 1;
                tr.append("<td id='role-" + role.roleId + "'>" + i + "</td>");

                tr.append("<td>" + role.roleName + "</td>");
                tr.append("<td>" + role.roleDesc + "</td>");

                tr.append("<td class='text-center'>" +
                    "<button type='button' class='btn bg-olive btn-xs' id='role-details-" + role.roleId + "'>详情</button> " +
                    "<button type='button' class='btn bg-olive btn-xs' id='role-update-" + role.roleId + "'>修改</button> " +
                    "<button type='button' class='btn bg-olive btn-xs' id='role-allocation-" + role.roleId + "'>分配权限</button> " +
                    "</td>");
                dataBody.append(tr);


                $("#roleList").append(tr);

                checkRoleDetailsPermission(role.roleId); // 详情按钮权限判断
                checkRoleUpdatePermission(role.roleId); // 修改按钮权限判断
                checkRoleAllocationPermission(role.roleId); // 分配角色按钮权限判断
            }
        }

        // 详情按钮权限判断(10)
        function checkRoleDetailsPermission(roleId) {

            var token = localStorage.getItem('token');
            var longToken = localStorage.getItem('longToken');

            if (token && longToken) {
                var decoded = jwt_decode(longToken);
                var roles = decoded.roles;
            } else {
                // 跳转到登录页面
                window.location.href = 'employee-login.html';
            }

            var detailsButton = $("#role-details-" + roleId);

            // 将 hasDetails 的值设置为 false
            var hasDetails = false;

            for (var i = 0; i < roles.length; i++) {
                var role = roles[i];

                var hasPermission10 = false;
                for (var j = 0; j < role.permissions.length; j++) {
                    var permission = role.permissions[j];

                    if (permission.permissionId == 10) { // 查看详情权限
                        hasPermission10 = true;
                        break;
                    }
                }

                if (hasPermission10) {
                    hasDetails = true;
                    break;
                }
            }

            if (hasDetails) {
                detailsButton.prop("disabled", false);
                detailsButton.click(function () {
                    window.location.href = 'role-desc.html?roleId=' + roleId; // 跳转详情页面
                });
            } else {
                detailsButton.prop("disabled", true);
            }
        }

        // 修改按钮权限判断(11)
        function checkRoleUpdatePermission(roleId) {

            var token = localStorage.getItem('token');
            var longToken = localStorage.getItem('longToken');

            if (token && longToken) {
                var decoded = jwt_decode(longToken);
                var roles = decoded.roles;
            } else {
                // 跳转到登录页面
                window.location.href = 'employee-login.html';
            }

            var updateButton = $("#role-update-" + roleId);

            // 将 hasDetails 的值设置为 false
            var hasDetails = false;

            for (var i = 0; i < roles.length; i++) {
                var role = roles[i];

                var hasPermission10 = false;
                for (var j = 0; j < role.permissions.length; j++) {
                    var permission = role.permissions[j];

                    if (permission.permissionId == 11) { //修改权限
                        hasPermission10 = true;
                        break;
                    }
                }

                if (hasPermission10) {
                    hasDetails = true;
                    break;
                }
            }

            if (hasDetails) {
                updateButton.prop("disabled", false);
                updateButton.click(function () {
                    window.location.href = 'role-update.html?roleId=' + roleId; // 跳转修改页面
                });
            } else {
                updateButton.prop("disabled", true);
            }
        }

        // 分配权限按钮权限判断(12)
        function checkRoleAllocationPermission(roleId) {

            var token = localStorage.getItem('token');
            var longToken = localStorage.getItem('longToken');

            if (token && longToken) {
                var decoded = jwt_decode(longToken);
                var roles = decoded.roles;

            } else {
                // 跳转到登录页面
                window.location.href = 'employee-login.html';
            }

            var AllocationButton = $("#role-allocation-" + roleId);

            if (roleId === 1) { // 如果当前按钮的id为1，则禁用该按钮
                AllocationButton.prop("disabled", true);
                return;
            }

            // 将 hasDetails 的值设置为 false
            var hasDetails = false;

            for (var i = 0; i < roles.length; i++) {
                var role = roles[i];

                var hasPermission10 = false;
                for (var j = 0; j < role.permissions.length; j++) {
                    var permission = role.permissions[j];

                    if (permission.permissionId == 12) { // 分配角色权限
                        hasPermission10 = true;
                        break;
                    }
                }

                if (hasPermission10) {
                    hasDetails = true;
                    break;
                }
            }

            if (hasDetails) {
                AllocationButton.prop("disabled", false);
                AllocationButton.click(function () {
                    window.location.href = 'role-permission.html?roleId=' + roleId; // 分配角色页面
                });
            } else {
                AllocationButton.prop("disabled", true);
            }

        }

        $(document).ready(function () {

            // 激活导航位置
            setSidebarActive("admin-role-manage");

            var token = localStorage.getItem('token');
            var longToken = localStorage.getItem('longToken');

            if (token && longToken) {
                var decoded = jwt_decode(longToken);
                var roles = decoded.roles;

                generateRoleList(token, longToken, roles);
            } else {
                // 跳转到登录页面
                window.location.href = 'employee-login.html';
            }


            // 列表按钮 
            $("#dataList td input[type='checkbox']").iCheck({
                checkboxClass: 'icheckbox_square-blue',
                increaseArea: '20%'
            });
            // 全选操作 
            $("#selall").click(function () {
                var clicks = $(this).is(':checked');
                if (!clicks) {
                    $("#dataList td input[type='checkbox']").iCheck("uncheck");
                } else {
                    $("#dataList td input[type='checkbox']").iCheck("check");
                }
                $(this).data("clicks", !clicks);
            });
        });
    </script>
</body>

</html>